<template>
	<view class="video-container">
		<!-- 视频滑动容器 -->
		<swiper class="video-swiper" vertical :current="currentIndex" @change="onSwiperChange" circular :duration="300">
			<swiper-item v-for="(item, index) in videoList" :key="item.id" class="swiper-item">
				<!-- 视频播放区域 -->
				<view class="video-wrapper" @touchstart="(e) => handleVideoTouchStart(e, index)"
				 >
					<video :id="'video' + index" class="video" :src="item.videoUrl" :autoplay="currentIndex === index"
						:paused="!videoPlayState[index]" @timeupdate="(e) => onTimeUpdate(index, e)"
						@loadedmetadata="(e) => onLoadedMetadata(index, e)"></video>

					<!-- 暂停图标 -->
					<image v-if="!videoPlayState[index]" class="pause-icon" src="/static/video/play.png" />

					<!-- 双击爱心效果 -->
					 <image 
					            v-if="showHeart === index"
					            class="heart-animation"
					            src="/static/video/liked.png"
					          />
				</view>

				<!-- 左侧信息区 -->
				<view class="video-info">
					<text class="username">@{{ item.username }}</text>
					<text class="description">{{ item.description }}</text>
				</view>

				<!-- 右侧操作栏 -->
				<view class="video-side">
					<!-- 用户头像 & 关注 -->
					<view class="side-item">
						<image class="avatar" :src="item.avatar" />
						<view class="follow-btn" :class="{ followed: item.isFollowing }"
							@click.stop="toggleFollow(index)">
							{{ item.isFollowing ? '已关注' : '关注' }}
						</view>
					</view>

					<!-- 点赞 -->
					<view class="side-item">
						<image class="icon" :src="item.isLiked ? '/static/video/liked.png' : '/static/video/like.png'"
							@click.stop="toggleLike(index)" />
						<text class="count">{{ item.likeCount }}</text>
					</view>

					<!-- 评论 -->
					<view class="side-item">

						<tm-drawer :title="'3条评论'" :show-close="true" :showFooter="true"
							position="bottom">
							<template #trigger>
								<image class="icon" src="/static/video/comment.png" />
								<text class="count">{{ item.commentCount }}</text>
							</template>

							<template #default>
								<!-- 评论 -->
								    <!-- 评论内容 -->
									<uv-empty v-if="commentList.length == 0" text="暂无评论" mode="message"></uv-empty>
									<view>
										<!-- 这里做循环 -->
										<view class="lc-vd-information-pl-card" v-for="item,index in commentList" :key="index">
											<view class="lc-vd-information-pl-card-core">
												<!-- 头像 -->
												<uv-avatar :src="item.uavatar"></uv-avatar>
												<!-- 用户名，评价内容，日期，地址 -->
												<view class="lc-vd-information-pl-card__user">
													<view class="lc-vd-information-pl-card__user-a">{{item.creatorName}}</view>
													<view class="lc-vd-information-pl-card__user-b">{{item.content}}</view>
													<view  class="lc-vd-information-pl-card__user-c">
														<view  class="lc-vd-information-pl-card__user-c1">{{item.createTimeFormat}}</view>
														<view  class="lc-vd-information-pl-card__user-c2">{{item.city}}</view>
													</view>
												</view>
											</view>
											
											<!-- 评价的点赞&踩 -->
											<view class="lc-vd-information-pl-card__star">
												<view  class="lc-vd-information-pl-card__star-a" @click="commentDz(item)">
													<uv-icon name="heart" color="gray" size="16"></uv-icon> 
													{{item.dzs}}
												</view>
												<view class="lc-vd-information-pl-card__star-b"  @click="commentDc(item)">
													<uv-icon name="thumb-down" color="gray" size="16"></uv-icon> 
													{{item.dcs}}
												</view>
												
											</view>
										</view>
									</view>
								
							</template>


							<template #footer>
							 <tm-input round="88" v-model="inputComment" size="s" class="mb-12" :maxlength="20" 
							 :showClear="true" :fixed="true"
							 placeholder="美好的一天从评论开始" 
							 left-icon="chat-smile-2-line" >
							                <template v-slot:rightIcon>
							                    <tm-button class="mr-1" height="52" width="100" round="88"
												  size="m" color="error" @click="inputCommentSubmit">发送</tm-button>
							                </template>
							            </tm-input>
							</template>

						</tm-drawer>


					</view>

					<!-- 分享 -->
					<view class="side-item">
						<image class="icon" src="/static/video/share.png" @click.stop="handleShare" />
						<text class="count">{{ item.shareCount }}</text>
					</view>
				</view>

				<!-- 进度条 -->
				<slider class="progress-bar" :value="progressValues[index] || 0" :max="videoDurations[index] || 1"
					block-size="12" @changing="(e) => onProgressChanging(index, e)" />
			</swiper-item>
		</swiper>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,onBeforeUnmount
	} from 'vue'
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	const inputComment = ref('') // 输入的内容
	const inputCommentSubmit = () =>{
		console.log('发送评论>>.',inputComment.value)
		inputComment.value = ''
	}
	const commentList = ref([
		{	
			uavatar: '/static/video/user.jpg',
			content:'666',
			creatorName:'张三',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},
		{
			uavatar: '/static/video/user.jpg',
			content:'666666666666666',
			creatorName:'李四',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},{	
			uavatar: '/static/video/user.jpg',
			content:'666',
			creatorName:'张三',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},
		{
			uavatar: '/static/video/user.jpg',
			content:'666666666666666',
			creatorName:'李四',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},{	
			uavatar: '/static/video/user.jpg',
			content:'666',
			creatorName:'张三',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},
		{
			uavatar: '/static/video/user.jpg',
			content:'666666666666666',
			creatorName:'李四',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},{	
			uavatar: '/static/video/user.jpg',
			content:'666',
			creatorName:'张三',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},
		{
			uavatar: '/static/video/user.jpg',
			content:'666666666666666',
			creatorName:'李四',
			createTimeFormat:'2025-03-13 14:01:01',
			city:'北京',
			dzs:123,
			dcs:456,
		},
	])
	
	
	/**
	 * ===========================
	 */
// 新增双击控制变量
let lastTapTime = 0;
let tapTimeout = null;
	// 视频数据
	const videoList = reactive([{
			id: 1,
			username: '@抖音小助手',
			description: '这是一个有趣的短视频～',
			avatar: '/static/video/user.jpg',
			videoUrl: 'https://img.qunliao.info:443/4oEGX68t_9505974551.mp4',
			likeCount: 1234,
			commentCount: 567,
			shareCount: 89,
			isLiked: false,
			isFollowing: false
		},
		{
			id: 2,
			username: '@热门视频',
			description: '欢迎来到我的直播间～',
			avatar: '/static/video/user.jpg',
			videoUrl: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4',
			likeCount: 4321,
			commentCount: 765,
			shareCount: 98,
			isLiked: false,
			isFollowing: false
		},
		// 更多模拟数据...
	])

	// 当前播放索引
	const currentIndex = ref(0)
	// 播放状态数组
	const videoPlayState = reactive([])
	// 视频时长数组
	const videoDurations = reactive([])
	// 进度条值数组
	const progressValues = reactive([])
	// 双击爱心显示 
	const showHeart = ref(-1) // -1表示不显示
	// 评论弹窗控制
	const commentPopup = ref(null)

	// 初始化播放状态
	onMounted(() => {
		videoList.forEach((_, index) => {
			videoPlayState[index] = true
			progressValues[index] = 0
		})
	})
// 组件卸载时清理定时器
onBeforeUnmount(() => {
  clearTimeout(tapTimeout);
});
	// 切换视频时处理自动播放
	const onSwiperChange = async (e) => {
		const oldIndex = currentIndex.value
		const newIndex = e.detail.current

		// 暂停上一个视频
		if (videoPlayState[oldIndex]) {
			const oldVideo = uni.createVideoContext(`video${oldIndex}`)
			await oldVideo.pause()
			videoPlayState[oldIndex] = false
		}

		// 播放新视频
		currentIndex.value = newIndex
		const newVideo = uni.createVideoContext(`video${newIndex}`)
		await newVideo.play()
		videoPlayState[newIndex] = true
	}

	// 视频点击控制播放/暂停
	const handleVideoClick = (index) => {
		const video = uni.createVideoContext(`video${index}`)
		if (videoPlayState[index]) {
			video.pause()
		} else {
			video.play()
		}
		videoPlayState[index] = !videoPlayState[index]
	}
	// 双击处理
	const handleDoubleClick = (index) => {
		// const currentTime = Date.now()
		// if (currentTime - lastTapTime < 300) {
		// 	showHeart.value = true
		// 	setTimeout(() => {
		// 		showHeart.value = false
		// 	}, 1000)
		// }
		// lastTapTime = currentTime
		  // 仅显示爱心不影响播放状态
		  showHeart.value = index;
		  const item = videoList[index]
		  item.isLiked = true
		  setTimeout(() => {
		    showHeart.value = -1;
		  }, 1000);
	}

	// 切换关注状态
	const toggleFollow = (index) => {
		videoList[index].isFollowing = !videoList[index].isFollowing
	}

	// 切换点赞状态
	const toggleLike = (index) => {
		const item = videoList[index]
		item.isLiked = !item.isLiked
		item.likeCount += item.isLiked ? 1 : -1
	}

	// 分享处理
	const handleShare = () => {
		console.log('分享')
	}

	// 进度条拖拽处理
	const onProgressChanging = (index, e) => {
		const value = e.detail.value
		const videoContext = uni.createVideoContext(`video${index}`)
		videoContext.seek(value)
		progressValues[index] = value
	}

	// 时间更新处理
	const onTimeUpdate = (index, e) => {
		progressValues[index] = e.detail.currentTime
	}

	// 获取视频时长
	const onLoadedMetadata = (index, e) => {
		videoDurations[index] = e.detail.duration
	}

	// 显示评论
	const showComment = () => {
		commentPopup.value.open()
	}
	
	// 新增智能点击检测： 通过时间差智能区分单击/双击，300ms为国际通用双击间隔标准
	const handleVideoTouchStart = (e, index) => {
	  const currentTime = Date.now();
	   
	   // 双击检测（300ms内连续点击）
	   if (currentTime - lastTapTime < 300) {
	     // 清除单击延时
	     clearTimeout(tapTimeout);
	     // 执行双击操作
	     handleDoubleClick(index);
	   } else {
	     // 设置单击延时
	     tapTimeout = setTimeout(() => {
	       handleVideoClick(index);
	     }, 300);
	   }
	   lastTapTime = currentTime;
	};
	
</script>

<style scoped>
	/* 容器样式 */
	.video-container {
		width: 100vw;
		height: 100vh;
		background: #000;
	}

	/* 滑动容器样式 */
	.video-swiper {
		height: 100%;
	}

	.swiper-item {
		position: relative;
		height: 100%;
	}

	/* 视频区域样式 */
	.video-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 暂停图标 */
	.pause-icon {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	/* 用户信息样式 */
	.video-info {
		position: absolute;
		bottom: 120rpx;
		left: 20rpx;
		color: #fff;
		z-index: 2;
	}

	.username {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
	}

	.description {
		font-size: 28rpx;
		margin-top: 10rpx;
		display: block;
	}

	/* 右侧操作栏样式 */
	.video-side {
		position: absolute;
		right: 20rpx;
		bottom: 120rpx;
		z-index: 2;
	}

	.side-item {
		margin-bottom: 40rpx;
		text-align: center;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.icon {
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin: 0 auto;
	}

	.count {
		color: #fff;
		font-size: 24rpx;
		display: block;
		margin-top: 8rpx;
	}

	.follow-btn {
		width: 100rpx;
		height: 40rpx;
		background: #FE2C55;
		color: #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.follow-btn.followed {
		background: #666;
	}

	/* 进度条样式 */
	.progress-bar {
		position: absolute;
		bottom: 80rpx;
		left: 20rpx;
		right: 20rpx;
		width: auto;
		z-index: 2;
	}

	/* 爱心动画 */
	.heart-animation {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		animation: heartScale 0.8s linear;
		 /* 新增点击穿透 */
		  pointer-events: none;
		  /* 增强动画效果 */
		  animation: heartScale 0.8s ease-out;
	}

	@keyframes heartScale {
		0% {
			transform: translate(-50%, -50%) scale(0);
			opacity: 1;
		}

		100% {
			transform: translate(-50%, -50%) scale(2);
			opacity: 0;
		}
	}

	/* 评论弹窗样式 */
	.comment-box {
		background: #fff;
		height: 60vh;
		padding: 20rpx;
	}

	.comment-list {
		height: 50vh;
	}

	.comment-input {
		display: flex;
		padding: 20rpx;
		border-top: 1rpx solid #eee;
	}

	/* 新增样式 */
	.pause-icon {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 3;
	}

	.comment-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	
	/* 评论 */
	.lc-vd-information-pl-card{
		display: flex;
		   align-items: center;
		       justify-content: space-between;
		       margin-bottom: .8rem;
			       border-bottom: 1px solid #ededed;
			       padding-bottom: 15px;
	}
	.lc-vd-information-pl-card-core{
		    display: flex;
		    align-items: center;
			    width: 83%;
	}
	.lc-vd-information-pl-card__user{
		    width: 15rem;
			margin-left: .5rem;
	}
	.lc-vd-information-pl-card__user-a{
	font-size: 14px;
	    color: #696969;
	}
	.lc-vd-information-pl-card__user-b{
		    font-size: 11px;
			    margin: .4rem 0px;
	}
	.lc-vd-information-pl-card__user-c{
		  display: flex;
		      align-items: center;
		      justify-content: flex-start;
		      font-size: 12px;
		      color: gray;
	}
	.lc-vd-information-pl-card__user-c1{
		
	}
	.lc-vd-information-pl-card__user-c2{
		    margin-left: 2rem;
	}
	.lc-vd-information-pl-card__star{
		display: flex;
		    width: 100%;
		    align-items: center;
		    justify-content: space-around;
			    font-size: 12px;
	}
	.lc-vd-information-pl-card__star-a{
		    display: flex;
		    align-items: center;
			width: max-content;
			    margin-right: 7px;
	}
	.lc-vd-information-pl-card__star-b{
		    display: flex;
			width: max-content;
		    align-items: center;
	}
</style>